<script setup>
import {
  Setting,
  Bottom,
  ArrowDown,
  Operation,
  HelpFilled,
} from "@element-plus/icons-vue";
import {useStateStore} from "@/stores/counter.js";
import {useRouter, useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import {certificateAPI, extractAPI} from "@/apis/anay.js";
import axios from "axios";
import ChartWordCloud from './ChartWordCloud.vue'

const stateStore = useStateStore();
const router = useRouter();
const route = useRoute();
const xmlInfo = ref({});
const cerInfo = ref({});
const loading = ref(true);
const manifest_path = ref(null);
const dex_output_dir = ref(null);

const state = ref({
    chartOptions: {
      series: [
        {
          gridSize: 20,
          data: [
            {
              name: 'XML', value: 30,
            },
            {name: 'Java',value: 30},
            { name: 'SAX', value: 28 },
            { name: 'DOM', value: 28 },
            { name: 'JAXB', value: 25 },
            { name: "DocumentBuilder", value: 23 },
            { name: 'Transformer', value: 20 },
            { name: 'List', value: 18 },
            { name: 'Set', value: 15 },
            { name: 'Checked Exception', value: 30 },
            { name: 'Class', value: 30 },
            { name: "URLConnection", value: 10 },
            { name: "HttpURLConnection", value: 19 },
            { name: "Thread", value: 19 },
            { name: "Runnable", value: 17 },
            { name: "Future", value: 17 },
            { name: "Callable", value: 16 },
            { name: "Annotation", value: 26 },
            { name: "@Retention", value: 26 },
            { name: "@Retention", value: 23 },
            { name: "List<E>", value: 23 },
            { name: "Map<K, V>", value: 30 },
            { name: "browse", value: 10 },
            { name: "container", value: 27 },
            { name: "context ", value: 13 },
            { name: "collapse", value: 15 },
            { name: "component", value: 17 },
            { name: "entity", value: 19 },
            { name: "Dispatcher", value: 30 },
            {
              name: 'XML', value: 30,
            },
            {name: 'Java',value: 30},
            { name: 'SAX', value: 28 },
            { name: 'DOM', value: 28 },
            { name: 'JAXB', value: 25 },
            { name: "DocumentBuilder", value: 23 },
            { name: 'Transformer', value: 20 },
            { name: 'List', value: 18 },
            { name: 'Set', value: 15 },
            { name: 'Checked Exception', value: 30 },
            { name: 'Class', value: 30 },
            { name: "URLConnection", value: 10 },
            { name: "HttpURLConnection", value: 19 },
            { name: "Thread", value: 19 },
            { name: "Runnable", value: 17 },
            { name: "Future", value: 17 },
            { name: "Callable", value: 16 },
            { name: "Annotation", value: 26 },
            { name: "@Retention", value: 26 },
            { name: "@Retention", value: 23 },
            { name: "List<E>", value: 23 },
            { name: "Map<K, V>", value: 30 },
            { name: "browse", value: 10 },
            { name: "container", value: 27 },
            { name: "context ", value: 13 },
            { name: "collapse", value: 15 },
            { name: "component", value: 17 },
            { name: "entity", value: 19 },
            { name: "Dispatcher", value: 30 },
          ],
        },
      ],
    },
  })

const goToXML = () => {
  router.push({
    name: "xmlcode",
    query: {manifest_path: manifest_path.value},
  });
};

const goToJava = () => {
  router.push({
    name: "javacode",
    query: {dex_output_dir: dex_output_dir.value},
  });
};

const loadData = (filepath) =>{
  const storedManifestPath = sessionStorage.getItem('manifestPath');
  const storedDex = sessionStorage.getItem('dex_dir');
  if(storedManifestPath && storedDex){
    manifest_path.value = JSON.parse(storedManifestPath);
    dex_output_dir.value = JSON.parse(storedDex);
    console.log(manifest_path)
    console.log(dex_output_dir)
    loading.value = false;
  }else {
    fetchData(filepath);
  }
}

const fetchData = async (filepath) =>{
  try{
    const response = await extractAPI(filepath);

    manifest_path.value = response.data.manifest_path;
    dex_output_dir.value = response.data.dex_output_dir;
    sessionStorage.setItem('manifestPath',JSON.stringify(manifest_path.value));
    sessionStorage.setItem('dex_dir',JSON.stringify(dex_output_dir.value));
    loading.value = false;
  }catch (error){
    console.error('Failed to fetch data',error);
  }
}

onMounted(() =>{
  const filepath = route.query.filepath;
  // console.log(filepath)
  loadData(filepath);
});





// onMounted(async () => {
//   const filepath = route.query.filepath;
//   const response = await extractAPI(filepath);
//   loading.value = false;
//   manifest_path.value = response.data.manifest_path;
//   console.log(manifest_path.value)
//   dex_output_dir.value = response.data.dex_output_dir;
// });


const downloadFile = (filepath) => {
  window.location.href = `http://localhost:5000/download/${filepath}`;
};
</script>

<template>
    <el-card shadow="always" style="margin-bottom: 10px"  >
      <template #header
    >
      <SvgIcon iconName="icon-code" style="margin-right: 5px"></SvgIcon
      >
      源码分析
    </template>
    <div class="bestsellers-container">
      <chart-word-cloud :options="state.chartOptions"></chart-word-cloud>
    </div>
      <el-card class="codeCard" shadow="never" style="margin-bottom: 10px;height: 20rem" v-loading="loading" element-loading-text="分析中...">
        <div class="action">
          <div class="mycard">
            <div class="left left1">
              <el-icon>
                <Setting/>
              </el-icon>
            </div>
            <div class="right">
              <span>AndroidManifest配置</span>
              <div>
                <el-button type="primary" @click="goToXML">
                  <el-icon>
                    <ArrowDown/>
                  </el-icon>
                  查看
                </el-button
                >
                <el-button type="success" @click="downloadFile(manifest_path)">
                  <el-icon>
                    <Bottom/>
                  </el-icon>
                  下载
                </el-button
                >
              </div>
            </div>
          </div>
          <div class="mycard">
            <div class="left left2">
              <el-icon>
                <HelpFilled/>
              </el-icon>
            </div>
            <div class="right">
              <span>Java源代码</span>
              <div>
                <el-button type="primary" @click="goToJava">
                  <el-icon>
                    <ArrowDown/>
                  </el-icon>
                  查看
                </el-button
                >
              </div>
            </div>
          </div>
          <!-- <div class="mycard">
            <div class="left left3">
              <el-icon><Operation /></el-icon>
            </div>
            <div class="right">
              <span>APK文件</span>
              <div>
                <el-button type="primary">
                  <el-icon><ArrowDown /></el-icon>
                  查看</el-button
                >
                <el-button type="success">
                  <el-icon><Bottom /></el-icon>
                  下载</el-button
                >
              </div>
            </div>
          </div> -->
        </div>
  </el-card>
  </el-card>

</template>

<style scoped>
.codeCard{
  margin-top: 10%;
}
.el-card.is-always-shadow{
  height: 100%;
  overflow: auto;
}
.bestsellers-container {
    height: 40rem;
}
#charts-content {
  /* 需要设置宽高后才会显示 */
  width: 100%;
  height: 100%;
}
.right .el-icon {
  font-weight: bold;
}

.el-button {
  font-weight: bold;
  font-size: 18px;
}

.right div {
  margin-top: 3px;
}

.right span {
  font-weight: normal;
  font-size: 18px;
}

.right {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.left .el-icon {
  font-size: 35px;
  color: white;
}

.left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
}

.left1 {
  background-color: #17a2b8;
}

.left2 {
  background-color: #28a745;
}

.left3 {
  background-color: #dc3545;
}

.mycard {
  display: flex;
  width: 400px;
  font-weight: bold;
  height: 135px;
  align-items: center;
  border-radius: 5px;
  padding: 5px 5px;
  border: 1px solid #e4e7ed;
  box-shadow: 0px 0px 2px 1px #e4e7ed;
  margin-top: 20px;
}

.action {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

::v-deep .el-card__header {
  font-weight: bold;
  font-size: 20px;
}
</style>